<template>
	<view>
		<!-- 头部用户信息 -->
		<u-cell-group :customStyle="{'background':'#ffffff'}">
			<u-cell title="头像">
				<uni-file-picker :value="userInfo.avatar" slot="right-icon" limit="1" :del-icon="false" disable-preview
					:imageStyles="imageStyles" file-mediatype="image">选择</uni-file-picker>
				<!-- <image slot="right-icon" class="avatar" :src="userInfo.avatar" mode="aspectFill"></image> -->
			</u-cell>
			<u-cell title="用户名" :value="userInfo.username"><text @tap="inputDialogToggle" class="useTit"
					slot="right-icon">修改</text></u-cell>
			<u-cell title="邮箱" :value="userInfo.email"><text @tap="inputDialogToggle" class="useTit"
					slot="right-icon">修改</text></u-cell>
			<!-- 其他用户信息项 -->
			<!-- ... -->
		</u-cell-group>
		
		<!-- 设置选项 -->
		<u-cell-group title="设置" :customStyle="{'background':'#ffffff'}">
			<u-cell title="修改密码" isLink @click="changePassword"></u-cell>
			<u-cell title="支付设置" isLink @click="changPayPassword">支付设置</u-cell>
			<u-cell title="通知设置" isLink @click="notificationSettings"></u-cell>
			<!-- 其他设置项 -->
		
		</u-cell-group>
		
		<!-- 底部退出登录按钮 -->
		<u-cell-group>
			<u-cell @click="logout" class="logout-cell" center>
				退出登录
			</u-cell>
		</u-cell-group>
		<uni-popup ref="inputDialog" type="dialog">
			<uni-popup-dialog ref="inputClose" mode="input" title="修改用户名" value="修改用户名!" placeholder="输入修改用户名"
				@confirm="dialogInputConfirm"></uni-popup-dialog>
		</uni-popup>
		<!-- 底部退出登录按钮 -->
		<u-button type="error" @tap="logout" class="logout-cell" text="退出"></u-button>
	</view>
</template>

<script>
	export default {
		data() {
			return {
				userInfo: {
					avatar: [{
						url: 'https://qiniu-web-assets.dcloud.net.cn/unidoc/zh/shuijiao-small.jpg'
					}],
					username: 'John Doe',
					email: 'john.doe@example.com',
					// 其他用户信息
				},
				imageStyles: {
					width: 64,
					height: 64,
					border: {
						radius: '50%'
					}
				},
			};
		},
		methods: {
			notificationSettings() {
				// 处理通知设置逻辑
			},
			logout() {
				// 处理退出登录逻辑
				uni.navigateTo({
					url: "/pages/login/index"
				})
			},
			changePassword() {
				// 处理修改密码逻辑
				this.$refs.inputDialog.open()
			},
			inputDialogToggle() {
				this.$refs.inputDialog.open()
			},
			notificationSettings() {
				// 处理通知设置逻辑
			},
			changPayPassword(){
				uni.navigateTo({
					url:"/pages/tabBar/my/setting/paysetting/paysetting"
				})
			}
		}
	};
</script>

<style scoped>
	/* 根据需要添加样式 */
	.avatar {
		width: 60px;
		height: 60px;
		border-radius: 50%;
	}

	.logout-cell {
		margin: 0 auto;
		margin-top: 4rem;
		width: 50%;
	}
	.avatar {
		width: 60px;
		height: 60px;
		border-radius: 50%;
	}
	
	.useTit {
		font-size: 0.9rem;
		color: #f45105;
		margin-bottom: 0.1rem;
	}
	
	
	
	.dialog-box {
		padding: 10px;
	}
</style>